1<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.global.js"></script>
</head>
<body>
  <div id="root">
    <my-title :title="title"></my-title>
    <my-title></my-title>
  </div>
</body>
<script>
  /**
    1.父组件在调用子组件的地方，添加自定义的属性, 属性的值就是传递给子组件的值
      如果属性的值是变量，boolean,number类型，对象，数组，null，undefined，
      需要使用绑定属性
  */

  // 2.在子组件定义的地方，添加一个props选项，有三种写法
  // 2.1 props 的值为数组，数组的元素为 之前定义的属性名
  // 2.2 props 的值为对象，key值为自定义的属性名，value值为数据类型
  // 2.3 props 的值为对象，key值为自定义的属性名，value值又为一个对象
  //    该对象的 type 属性可以表示 数据类型
  //    该对象的 default 属性可以表示 属性的默认值（父组件在调用子组件时可以不传递）--- 如果属性值是对象或者数组，default写为函数，返回相应的值
  //    该对象的 required 属性表示该属性是必须传递的，即使 使用了 default 也要传递数据
  //    该对象的 validator 属性可以实现自定义验证函数, 如果返回值为false，会弹出警告

  // 在子组件的模版中可以通过 自定义的属性名 渲染数据
  const { createApp } = window.Vue
  const myTitle = {
    // 父组件有值传给子组件，但是子组件没有props属性时，将会成为子组件的自定义属性，
    // 有props属性则表明子组件内部将会使用该传值
    // props: ['title'],
    // props: {
    //   title: String
    // },
    props: {
      title: {
        type: String,
        default: '10000',
        // 将会验证函数后返回结果，结果错误控制台将出现警告，但不是错误
        validator (val) {
          return val === '100'
        }
      }
    },
    template: `<h1>hello- {{ title }}</h1>`
  }
  const app = createApp({
    components: {
      myTitle
    },
    data () {
      return {
        title: '标题'
      }
    }
  })
  const vm = app.mount('#root')
</script>
</html>